<template>
    <div class="main-page" :model="childForm" :rule="rules">
        <el-form label-width="70px"
                 size="mini">
            <el-row type="flex" justify="center">
                <el-col :span="10">
                    <el-form-item label="开课科目">
                        <el-select @change="" class="search-input" v-model="childForm.subid"
                                   placeholder="请选择开课科目">
                            <el-option
                                v-for="item in gsubjectList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row type="flex" justify="center">
                <el-col :span="10">
                    <el-form-item label="开课日期">
                        <el-date-picker style="width: 220px"
                                        v-model="childForm.starttime"
                                        align="right"
                                        type="date"
                                        value-format="timestamp"
                                        placeholder="选择开课日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="10">
                    <el-form-item label="排课类型">
                        <el-radio-group v-model="childForm.plantype">
                            <el-radio :label="1">单次课</el-radio>
                            <el-radio :label="2">循环课</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="10">
                    <el-form-item label="结束方式">
                        <el-radio-group v-model="childForm.endtype">
                            <el-radio :label="1">按课节总数</el-radio>
                            <el-radio :label="2">按日期结束</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>



            <el-row type="flex" justify="center">
                <el-col :span="10">
                    <el-form-item label="排课总数">
                        <el-input size="mini" class="search-input" v-model="childForm.totalrecords"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="10">
                    <el-form-item label="循环规律">
                        <el-select @change="" class="search-input" v-model="childForm.cricleType"
                                   placeholder="循环规律">
                            <el-option value="" label="全部"></el-option>
                            <el-option
                                v-for="item in gcricleTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>


                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="10">
                    <div>时间示例:上午9点30分为0930，下午2点为1400</div>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="18">
                    <el-form-item label="星期选择">
                        <el-checkbox-group v-model="childForm.weekselect">
                            <el-checkbox-button label="星期一" key="1" >星期一</el-checkbox-button>
                            <el-checkbox-button label="星期二" key="2" >星期二</el-checkbox-button>
                            <el-checkbox-button label="星期三" key="3">星期三</el-checkbox-button>
                            <el-checkbox-button label="星期四" key="4">星期四</el-checkbox-button>
                            <el-checkbox-button label="星期五"key="5" >星期五</el-checkbox-button>
                            <el-checkbox-button label="星期六" key="6">星期六</el-checkbox-button>
                            <el-checkbox-button label="星期七"key="7" >星期七</el-checkbox-button>
                        </el-checkbox-group>



                    </el-form-item>
                </el-col>
            </el-row>








            <el-row type="flex" justify="center">
                <el-col :span="10">
                    <el-form-item label="老师">
                        <el-select @change="" class="search-input" v-model="childForm.eid"
                                   placeholder="请选择老师">
                            <el-option
                                v-for="item in gempList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="10">
                    <el-form-item label="教室">
                        <el-select @change="" class="search-input" v-model="childForm.rid"
                                   placeholder="请选择教室">
                            <el-option value="" label="全部"></el-option>
                            <el-option
                                v-for="item in groomList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="10">
                    <el-form-item label="扣课时数">
                        <el-input size="mini" class="search-input" v-model="childForm.reduce"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row type="flex" justify="center">
                <el-col :span="10">
                    <el-form-item label="课程主题">
                        <el-input size="mini" class="search-input" v-model="childForm.classsubject"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
    </div>


</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../../components/headTop'
    import {userList} from '@/api/getData'
    import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../../node_modules/element-ui/packages/select/src/option.vue";

    export default {
        props: {},
        data() {
            return {
                 rules: {
                    name: [
                        {required: true, message: '', trigger: 'blur'},
                    ]

                },
                checkboxGroup1:[],
                childForm: {weekselect:[]}
            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,

        },
        computed: {
            ...mapGetters(['adminInfo','gsubjectList','groomList','gempList','gcricleTypeList'])
        },
        created() {
        },
        mounted() {

        },
        methods: {
            ...mapActions(['getPeriod']),
              validFrom(){
                let flag = false
                this.$refs['addSubject'].validate((valid) => {
                    flag = valid
                })
                return flag;

            }
        },
    }
</script>
<style lang="less">
    @import '../../style/mixin';

    .el-table .sks {
        background: #c2e7b0;
    }
</style>
